<fieldset [disabled]="(changingPassword$ | async) || (reEncryptingSettings$ | async) || false">
    <accordion [closeOthers]="true">
        <accordion-group heading="Master password" [isOpen]="true">
            <form [formGroup]="form" (ngSubmit)="submit()" novalidate>
                <div class="form-group required">
                    <label>Current password</label>
                    <input type="password" class="form-control" formControlName="password"
                           [ngClass]="password.dirty ? {
                       'is-invalid': password.invalid,
                       'is-valid': password.valid
                   } : {}">
                </div>
                <div class="form-row">
                    <div class="form-group required col-md-6">
                        <label>New password</label>
                        <input type="password" class="form-control" formControlName="newPassword"
                               [ngClass]="newPassword.dirty ? {
                           'is-invalid': newPassword.invalid,
                           'is-valid': newPassword.valid
                       } : {}">
                    </div>
                    <div class="form-group required col-md-6">
                        <label>New Password Confirm</label>
                        <input type="password" class="form-control" formControlName="newPasswordConfirm"
                               [ngClass]="newPasswordConfirm.dirty ? {
                           'is-invalid': newPasswordConfirm.invalid,
                           'is-valid': newPasswordConfirm.valid
                       } : {}">
                        <div class="invalid-feedback" *ngIf="newPasswordConfirm.invalid && newPasswordConfirm.errors?.mismatch">
                            Passwords don't match.
                        </div>
                    </div>
                </div>
                <div class="clearfix">
                    <button class="btn btn-sm btn-primary pull-right" type="submit" [disabled]="form.invalid">
                        <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="changingPassword$ | async"></i>
                        Apply
                    </button>
                </div>
            </form>
        </accordion-group>
        <accordion-group heading="Encryption">
            <form [formGroup]="encryptionPresetForm" (ngSubmit)="submitPresets()" novalidate>
                <div class="form-group required">
                    <label>Current Master Password</label>
                    <input type="password" class="form-control" formControlName="password"
                           [ngClass]="encryptionPresetForm.controls.password?.dirty ? {
                       'is-invalid': encryptionPresetForm.controls.password?.invalid,
                       'is-valid': encryptionPresetForm.controls.password?.valid
                   } : {}">
                </div>
                <electron-mail-encryption-presets
                    [formGroup]="encryptionPresetForm"
                ></electron-mail-encryption-presets>
                <div class="clearfix">
                    <button class="btn btn-sm btn-primary pull-right" type="submit" [disabled]="encryptionPresetForm.invalid">
                        <i class="fa fa-spinner fa-pulse fa-fw" *ngIf="reEncryptingSettings$ | async"></i>
                        Apply
                    </button>
                </div>
            </form>
        </accordion-group>
    </accordion>
</fieldset>
